﻿<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="generator" content="Jekyll v3.6.0">
<title>文本框 &middot; BootstrapVue</title>
<!-- Bootstrap 核心CSS -->
<link href="../../../v4/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- 本文档额外专用css -->
<link href="../../../v4/assets/css/docsearch.min.css" rel="stylesheet">
<link href="../../../v4/assets/css/docs.min.css" rel="stylesheet">
<link href="../../style/bv_path.css" rel="stylesheet">

<!-- Favicons图标定义 -->
<link data-n-head="ssr" rel="manifest" href="../../manifest.json">
<link data-n-head="ssr" rel="shortcut icon" href="../../style/icons/icon_64.png">
<link data-n-head="ssr" rel="apple-touch-icon" href="../../style/icons/icon_512.png" sizes="512x512">

<!-- Meta关键字定义 -->
<meta name="description" content="The most popular HTML, CSS, and JS library in the world.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">

</head>
<body>
<a id="skippy" class="sr-only sr-only-focusable" href="#content">
<div class="container"> <span class="skiplink-text">跳到主体内容</span> </div>
</a>
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar"> <a class="navbar-brand mr-0 mr-md-2" href="../" aria-label="Bootstrap">
  <svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false">
    <title>Bootstrap</title>
    <path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/>
    <path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/>
  </svg>
  </a>
  <div class="navbar-nav-scroll">
    <ul class="navbar-nav bd-navbar-nav flex-row">
      <li class="nav-item"><a class="nav-link " href="../">首页</a></li>
      <li class="nav-item"><a class="nav-link" href="index.html">中文手册</a></li>
      <li class="nav-item"><a class="nav-link active" href="../components">组件</a></li>
      <li class="nav-item"><a class="nav-link " href="../directives">指令</a></li>
      <li class="nav-item"><a class="nav-link " href="../reference">参考</a></li>
      <li class="nav-item"><a class="nav-link " href="https://bootstrap-vue.org/play" target="_blank">体验</a></li>
      <li class="nav-item"><a class="nav-link " href="http://code.z01.com/v4"><i class="zi zi_bold" zico="粗"></i> Boostrap</a></li>
      <li class="nav-item"><a class="nav-link" href="http://ico.z01.com" target="_blank" rel="noopener">zico图标系统</a></li>
      <li class="nav-item"><a class="nav-link" href="http://www.z01.com" target="_blank" rel="noopener">Zoomla!逐浪CMS</a></li>
    </ul>
  </div>
  <ul class="navbar-nav flex-row ml-md-auto d-none d-md-flex">
    <li class="nav-item dropdown"> <a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="alse"> v2.12.0 </a>
      <div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions"> 
        <a class="dropdown-item active" href="../../../bootstrap-vue/docs/4.0/">Latest (4.3.x)</a>
        <a class="dropdown-item" href="/Boot/">v3.3.7</a>
        <a class="dropdown-item" href="/Sass/">Sass语言</a>
        <a class="dropdown-item" href="/Emmet/">Emmet语法</a>
        <a class="dropdown-item" href="//www.z01.com/tool/" target="_blank">IIS站长工具</a>
        <a class="dropdown-item" href="//ad.z01.com/" target="_blank">广告源码</a>
        <a class="dropdown-item" href="//v.z01.com/mb/" target="_blank">免费模板</a>
        <a class="dropdown-item" href="//v.z01.com/" target="_blank">H5移动创作</a>
        <a class="dropdown-item" href="//www.z01.com/help/web/3234.shtml" target="_blank">Flexbox布局</a>
		<a class="dropdown-item" href="/boot/font.html" target="_blank">Font Awesome</a>
</div>
    </li>
    <li class="nav-item"> <a class="nav-link p-2" href="//zoomla.github.io/bootstrap4-zhcn-documentation" target="_blank" rel="noopener" aria-label="GitHub">
      <svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" focusable="false">
        <title>GitHub</title>
        <path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd"/>
      </svg>
      </a> </li>
    <li class="nav-item"> <a class="nav-link p-2" href="http://www.z01.com/blog/ren/3214.shtml" target="_blank" rel="noopener" aria-label="Slack">译者说</a></li>
  </ul>
  <a class="btn btn-bd-yellow d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="download.html">下载 Bootstrap</a> </header>

<div class="container-fluid">
  <div class="row flex-xl-nowrap">
    <div class="col-12 col-md-3 col-xl-2 bd-sidebar">
      <form class="bd-search d-flex align-items-center">
        <input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off">
        <button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
        <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false">
          <title>Menu</title>
          <path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/>
        </svg>
        </button>
      </form>


<nav class="collapse bd-links" id="bd-docs-nav">
<div class=""><a href="../" class="bd-toc-link">首页</a></div>
<div class="bd-toc-item nuxt-link-exact-active "><a href="../../../bootstrap-vue/docs/" class="bd-toc-link  "> 起步 </a>
<ul class="nav bd-sidenav">
</ul>
</div>
<div class="bd-toc-item active"><a href="../../../bootstrap-vue/docs/components/" class="bd-toc-link nuxt-link-exact-active"> 组件 </a>
<ul class="nav bd-sidenav">
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/index.html" class="nav-link"> 组件目录 </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/alert.html" class="nav-link"> 警告提示框(Alert) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/badge.html" class="nav-link"> 徽章(Badge) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/badge.html" class="nav-link"> 面包屑导航(Breadcrumb) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/button.html" class="nav-link"> 按钮(Button) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/button-group.html" class="nav-link"> 按钮组(Button Group) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/button-toolbar.html" class="nav-link"> 按钮Toolbar(Button Toolbar) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/calendar.html" class="nav-link"> 日历组件(Calendar) <small class="badge text-uppercase badge-success">New</small> </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/card.html" class="nav-link"> 卡片(Card) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/carousel.html" class="nav-link"> 轮播效果(Carousel) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/collapse.html" class="nav-link"> 折叠面板(Collapse) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/dropdown.html" class="nav-link"> 下拉菜单(Dropdown) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/embed.html" class="nav-link"> 嵌入(Embed) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form.html" class="nav-link"> 表单(Form) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-checkbox.html" class="nav-link"> 表单复选框(Form Checkbox) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-datepicker.html" class="nav-link"> 表单时间选择器(Form Datepicker) <small class="badge text-uppercase badge-success">New</small> </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-file.html" class="nav-link"> 文件选择(Form File) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-group.html" class="nav-link"> 表单组合(Form Group) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-input.html" class="nav-link"> 表单输入框(Form Input) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-radio.html" class="nav-link"> 单选择表单Form Radio </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-select.html" class="nav-link"> 下拉式表单(Form Select) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-spinbutton.html" class="nav-link"> 按钮式表单(Form Spinbuttno) <small class="badge text-uppercase badge-success">New</small> </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-tags.html" class="nav-link"> Tags表单选择器(Form Tags) </a></li>
<li class="nav-item active"><a href="../../../bootstrap-vue/docs/components/form-textarea.html" class="nav-link"> 文本框(Form Textarea) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-timepicker.html" class="nav-link"> 表单内时间控件(Form Timepicker) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/image.html" class="nav-link"> 图片(Image) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/input-group.html" class="nav-link"> 输入框(Input Group) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/jumbotron.html" class="nav-link"> Hero大块屏(Jumbotron) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/layout.html" class="nav-link"> 布局与网络Layout and Grid System </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/link.html" class="nav-link"> 链接(Link)</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/list-group.html" class="nav-link"> 列表组(List group) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/media.html" class="nav-link"> 媒体(Media) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/modal.html" class="nav-link"> 弹出模态框(Modal) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/nav.html" class="nav-link"> 导航(Nav) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/navbar.html" class="nav-link"> 导航栏(Navbar) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/pagination.html" class="nav-link"> 分页(Pagination) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/pagination-nav.html" class="nav-link"> 分页导航(Pagination Nav) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/popover.html" class="nav-link"> 指示备注(Popover) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/progress.html" class="nav-link"> 进度指示器(Progress) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/spinner.html" class="nav-link"> 旋转指示器(Spinner) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/table.html" class="nav-link"> 表格(Table) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/tabs.html" class="nav-link"> 选项卡(Tabs) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/time.html" class="nav-link"> 时间组件(Time) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/toast.html" class="nav-link"> 冒泡推送(Toasts) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/tooltip.html" class="nav-link"> tip提示组件(Tooltip) </a></li>
</ul>
</div>
<div class="bd-toc-item"><a href="../../../bootstrap-vue/docs/directives/" class="bd-toc-link"> 指令 </a>
<ul class="nav bd-sidenav">
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/index.html" class="nav-link"> 指令目录 </a></li>
<li class="nav-item active"><a href="../../../bootstrap-vue/docs/directives/hover.html" class="nav-link"> Hover 指令<small class="badge text-uppercase badge-success">New</small> </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/popover.html" class="nav-link"> Popover 提示备注</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/scrollspy.html" class="nav-link"> Scrollspy 滚动监听</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/tooltip.html" class="nav-link"> Tooltip 提示指令</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/visible.html" class="nav-link"> Visible 可见性操作<small class="badge text-uppercase badge-success">New</small> </a></li>
</ul>
</div>
<div class="bd-toc-item"><a href="../../../bootstrap-vue/docs/icons.html" class="bd-toc-link"> Icons图标</a>
<ul class="nav bd-sidenav">
</ul>
</div>
  
<div class="bd-toc-item"><a class="bd-toc-link" href="../../../bootstrap-vue/docs/reference">参考</a>
<ul class="nav bd-sidenav">
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference" class="nav-link.html"> 参考目录 </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/accessibility.html" class="nav-link">友好访问</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/color-variants.html" class="nav-link">Color颜色变量 </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/images.html" class="nav-link"> 组件图像img的src路径解析</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/router-links.html" class="nav-link"> Router路由支持 </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/size-props.html" class="nav-link">大小规格</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/spacing-classes.html" class="nav-link">间距处理</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/starter-templates.html" class="nav-link">开始模板</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/theming.html" class="nav-link">主题色彩</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/utility-classes.html" class="nav-link">通用Class类</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/validation.html" class="nav-link">Form表单验证</a></li>
</ul>
</div>
<div class=""><a href="https://bootstrap-vue.org/play" class="bd-toc-link" target="_blank">在线模拟器</a></div>
</nav>
</div>

<div class="d-none d-xl-block col-xl-2 bd-toc">

<ul class="section-nav">
<li class="nav-item toc-entry mb-2"><a target="_self" href="#form-textarea" class="nav-link font-weight-bold"><span>文本框(Form textarea)</span></a></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#control-sizing" class="nav-link"><span>控制尺寸</span></a> <!----></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#displayed-rows" class="nav-link"><span>显示行</span></a>
<ul class="nav flex-column">
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#disable-resize-handle" class="nav-link"><span>禁用调整大小句柄</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#auto-height" class="nav-link"><span>自动高度</span></a></li>
</ul>
</li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#contextual-states" class="nav-link"><span>上下文状态</span></a>
<ul class="nav flex-column">
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#conveying-contextual-state-to-assistive-technologies-and-colorblind-users" class="nav-link"><span>向辅助技术和色盲用户传达上下文状态</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#aria-invalid-attribute" class="nav-link"><span>aria-invalid 属性</span></a></li>
</ul>
</li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#formatter-support" class="nav-link"><span>格式化支持</span></a> <!----></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#readonly-plain-text" class="nav-link"><span>只读纯文本</span></a> <!----></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#v-model-modifiers" class="nav-link"><span>v-model 修饰语</span></a> <!----></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#debounce-support" class="nav-link"><span>防反跳支持</span></a> <!----></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#autofocus" class="nav-link"><span>自动获取焦点</span></a> <!----></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#native-and-custom-events" class="nav-link"><span>本机和自定义事件</span></a> <!----></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#exposed-input-properties-and-methods" class="nav-link"><span>公开的 input 属性和方法</span></a>
<ul class="nav flex-column">
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#input-properties" class="nav-link"><span>Input 属性</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#input-methods" class="nav-link"><span>Input 方法</span></a></li>
</ul>
</li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#component-reference" class="nav-link"><span>组件引用</span></a>
<ul class="nav flex-column">
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#comp-ref-b-form-textarea" class="nav-link"><span>&lt;b-form-textarea&gt;</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#importing-individual-components" class="nav-link"><span>导入单个组件</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#importing-as-a-plugin" class="nav-link"><span>导入为Vue.js插件</span></a></li>
</ul>
</li>
</ul>
</div>

<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">

<nav data-v-aafc4aea="" aria-label="Breadcrumbs" class="float-left mt-2 mb-0 mb-lg-2">
<ol data-v-aafc4aea="" class="breadcrumb d-inline-flex bg-transparent px-2 py-1 my-0">
<li data-v-aafc4aea="" class="breadcrumb-item"><a data-v-aafc4aea="" href="../../" class="nuxt-link-active" target="_self">首页</a></li>
<li data-v-aafc4aea="" class="breadcrumb-item"><a data-v-aafc4aea="" href="../../../bootstrap-vue/docs" class="nuxt-link-active" target="_self">中文手册</a></li>
<li data-v-aafc4aea="" class="breadcrumb-item"><a data-v-aafc4aea="" href="../../../bootstrap-vue/docs/components/" class="nuxt-link-active" target="_self">组件</a></li>
<li data-v-aafc4aea="" class="breadcrumb-item active"><span data-v-aafc4aea="" aria-current="location">文本框</span></li>
</ol>
</nav>
<div class="clearfix d-block"></div>
  <h1 class="bd-title" id="content">文本框(Form textarea)</h1>
<p class="bd-lead">创建多行文本输入，并支持自动调整高度，最小和最大行数以及上下文状态。</p>
  <script type="text/javascript" src="../../../v4/assets/js/pupCMS.js"></script>



<nav class="bd-quick-links mb-3 d-xl-none" data-v-811345e6="">
<header data-v-811345e6="">
<button data-v-811345e6="" type="button" class="btn font-weight-bold btn-outline-secondary btn-sm btn-block collapsed" aria-controls="bd-quick-links-collapse" aria-expanded="false"><span data-v-811345e6="">Show</span> page table of contents </button>
</header>
<ul data-v-811345e6="" id="bd-quick-links-collapse" class="collapse" style="display: none;">
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#control-sizing" class=""><span data-v-811345e6="">Control sizing</span></a> </li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#displayed-rows" class=""><span data-v-811345e6="">Displayed rows</span></a>
<ul data-v-811345e6="">
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#disable-resize-handle" class=""><span data-v-811345e6="">Disable resize handle</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#auto-height" class=""><span data-v-811345e6="">Auto height</span></a></li>
</ul>
</li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#contextual-states" class=""><span data-v-811345e6="">Contextual states</span></a>
<ul data-v-811345e6="">
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#conveying-contextual-state-to-assistive-technologies-and-colorblind-users" class=""><span data-v-811345e6="">Conveying contextual state to assistive technologies and colorblind users</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#aria-invalid-attribute" class=""><span data-v-811345e6="">aria-invalid attribute</span></a></li>
</ul>
</li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#formatter-support" class=""><span data-v-811345e6="">Formatter support</span></a> </li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#readonly-plain-text" class=""><span data-v-811345e6="">Readonly plain text</span></a> </li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#v-model-modifiers" class=""><span data-v-811345e6="">v-model modifiers</span></a> </li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#debounce-support" class=""><span data-v-811345e6="">Debounce support</span></a> </li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#autofocus" class=""><span data-v-811345e6="">Autofocus</span></a> </li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#native-and-custom-events" class=""><span data-v-811345e6="">Native and custom events</span></a> </li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#exposed-input-properties-and-methods" class=""><span data-v-811345e6="">Exposed input properties and methods</span></a>
<ul data-v-811345e6="">
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#input-properties" class=""><span data-v-811345e6="">Input properties</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#input-methods" class=""><span data-v-811345e6="">Input methods</span></a></li>
</ul>
</li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#component-reference" class=""><span data-v-811345e6="">Component reference</span></a>
<ul data-v-811345e6="">
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#comp-ref-b-form-textarea" class=""><span data-v-811345e6="">&lt;b-form-textarea&gt;</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#importing-individual-components" class=""><span data-v-811345e6="">Importing individual components</span></a></li>
<li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#importing-as-a-plugin" class=""><span data-v-811345e6="">Importing as a Vue.js plugin</span></a></li>
</ul>
</li>
</ul>
</nav>
<div translate="translate" class="bd-example vue-example vue-example-b-form-textarea notranslate">
<div>
<textarea id="textarea" placeholder="Enter something..." wrap="soft" class="form-control" style="resize: none; overflow-y: scroll; height: 86px;"></textarea>
<pre class="mt-3 mb-0"></pre>
</div>
</div>
<pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-form-textarea</span>
      <span class="hljs-attr">id</span>=<span class="hljs-string">"textarea"</span>
      <span class="hljs-attr">v-model</span>=<span class="hljs-string">"text"</span>
      <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Enter something..."</span>
      <span class="hljs-attr">rows</span>=<span class="hljs-string">"3"</span>
      <span class="hljs-attr">max-rows</span>=<span class="hljs-string">"6"</span>
    &gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-form-textarea</span>&gt;</span>

    <span class="hljs-tag">&lt;<span class="hljs-name">pre</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mt-3 mb-0"</span>&gt;</span>{{ text }}<span class="hljs-tag">&lt;/<span class="hljs-name">pre</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
  <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    data() {
      <span class="hljs-keyword">return</span> {
        <span class="hljs-attr">text</span>: <span class="hljs-string">''</span>
      }
    }
  }
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></pre>
<h2 id="control-sizing" class="bv-no-focus-ring"><span class="bd-content-title">控制尺寸<a class="anchorjs-link" href="#control-sizing" aria-labelledby="control-sizing"></a></span></h2>
<p>使用 <code translate="no" class="notranslate text-nowrap">size</code> 属性将文本高度分别设置为 <code translate="no" class="notranslate text-nowrap">sm</code> 或 <code translate="no" class="notranslate text-nowrap">lg</code>（分别用于小号或大号）。</p>
<p>要控制宽度，请将输入放置在标准 Bootstrap 网格列内。</p>
<div translate="translate" class="bd-example vue-example vue-example-b-form-textarea-sizes notranslate">
<div class="container-fluid">
<div class="row">
<div class="col-sm-2">
<label for="textarea-small">Small:</label>
</div>
<div class="col-sm-10">
<textarea id="textarea-small" placeholder="Small textarea" rows="2" wrap="soft" class="form-control form-control-sm"></textarea>
</div>
</div>
<div class="row mt-2">
<div class="col-sm-2">
<label for="textarea-default">Default:</label>
</div>
<div class="col-sm-10">
<textarea id="textarea-default" placeholder="Default textarea" rows="2" wrap="soft" class="form-control"></textarea>
</div>
</div>
<div class="row mt-2">
<div class="col-sm-2">
<label for="textarea-large">Large:</label>
</div>
<div class="col-sm-10">
<textarea id="textarea-large" placeholder="Large textarea" rows="2" wrap="soft" class="form-control form-control-lg"></textarea>
</div>
</div>
</div>
</div>
<pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">b-container</span> <span class="hljs-attr">fluid</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-row</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">sm</span>=<span class="hljs-string">"2"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"textarea-small"</span>&gt;</span>Small:<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">sm</span>=<span class="hljs-string">"10"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-form-textarea</span>
        <span class="hljs-attr">id</span>=<span class="hljs-string">"textarea-small"</span>
        <span class="hljs-attr">size</span>=<span class="hljs-string">"sm"</span>
        <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Small textarea"</span>
      &gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-form-textarea</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-row</span>&gt;</span>

  <span class="hljs-tag">&lt;<span class="hljs-name">b-row</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mt-2"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">sm</span>=<span class="hljs-string">"2"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"textarea-default"</span>&gt;</span>Default:<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">sm</span>=<span class="hljs-string">"10"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-form-textarea</span>
        <span class="hljs-attr">id</span>=<span class="hljs-string">"textarea-default"</span>
        <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Default textarea"</span>
      &gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-form-textarea</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-row</span>&gt;</span>

  <span class="hljs-tag">&lt;<span class="hljs-name">b-row</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mt-2"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">sm</span>=<span class="hljs-string">"2"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"textarea-large"</span>&gt;</span>Large:<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">sm</span>=<span class="hljs-string">"10"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-form-textarea</span>
        <span class="hljs-attr">id</span>=<span class="hljs-string">"textarea-large"</span>
        <span class="hljs-attr">size</span>=<span class="hljs-string">"lg"</span>
        <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Large textarea"</span>
      &gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-form-textarea</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-row</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">b-container</span>&gt;</span></pre>
<h2 id="displayed-rows" class="bv-no-focus-ring"><span class="bd-content-title">显示行<a class="anchorjs-link" href="#displayed-rows" aria-labelledby="displayed-rows"></a></span></h2>
<p>要设置 <code translate="no" class="notranslate text-nowrap">&lt;b-form-textarea&gt;</code> 的高度，请将 <code translate="no" class="notranslate text-nowrap">rows</code> 属性设置为所需的行数。如果没有为 <code translate="no" class="notranslate text-nowrap">rows</code> 提供任何值，则它将默认为 <code translate="no" class="notranslate text-nowrap">2</code>（浏览器默认值和最小可接受值）。将其设置为 null 或小于 2 的值将导致使用默认值 <code translate="no" class="notranslate text-nowrap">2</code>。</p>
<div translate="translate" class="bd-example vue-example vue-example-b-form-textarea-rows notranslate">
<div>
<textarea id="textarea-rows" placeholder="Tall textarea" rows="8" wrap="soft" class="form-control"></textarea>
</div>
</div>
<pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-form-textarea</span>
    <span class="hljs-attr">id</span>=<span class="hljs-string">"textarea-rows"</span>
    <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Tall textarea"</span>
    <span class="hljs-attr">rows</span>=<span class="hljs-string">"8"</span>
  &gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-form-textarea</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></pre>
<h3 id="disable-resize-handle" class="bv-no-focus-ring"><span class="bd-content-title">禁用调整大小句柄<a class="anchorjs-link" href="#disable-resize-handle" aria-labelledby="disable-resize-handle"></a></span></h3>
<p>一些网络浏览器将允许用户重新调整文本区域的高度。要禁用此功能，请将 <code translate="no" class="notranslate text-nowrap">no-resize</code> 属性设置为 <code translate="no" class="notranslate text-nowrap">true</code> 。</p>
<div translate="translate" class="bd-example vue-example vue-example-b-form-textarea-no-resize notranslate">
<div>
<textarea id="textarea-no-resize" placeholder="Fixed height textarea" rows="3" wrap="soft" class="form-control" style="resize: none;"></textarea>
</div>
</div>
<pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-form-textarea</span>
    <span class="hljs-attr">id</span>=<span class="hljs-string">"textarea-no-resize"</span>
    <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Fixed height textarea"</span>
    <span class="hljs-attr">rows</span>=<span class="hljs-string">"3"</span>
    <span class="hljs-attr">no-resize</span>
  &gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-form-textarea</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></pre>
<h3 id="auto-height" class="bv-no-focus-ring"><span class="bd-content-title">自动高度<a class="anchorjs-link" href="#auto-height" aria-labelledby="auto-height"></a></span></h3>
<p><code translate="no" class="notranslate text-nowrap">&lt;b-form-textarea&gt;</code> 也可以自动调整其高度（文本行）以适合内容，即使用户输入或删除文本也是如此。文本区域的高度将增大或缩小以适合内容（增大到 <code translate="no" class="notranslate text-nowrap">max-rows</code>【最大行数】或缩小到最小 <code translate="no" class="notranslate text-nowrap">rows</code>【行数】）。</p>
<p>若要设置初始最小高度（以行为单位），请将 <code translate="no" class="notranslate text-nowrap">rows</code> 属性设置为所需的行数（或将其保留为默认值 <code translate="no" class="notranslate text-nowrap">2</code> ），然后设置文本区域将增长到的最大行数（显示滚动条之前） 通过将 <code translate="no" class="notranslate text-nowrap">max-rows</code> 属性设置为文本的最大行数。</p>
<p>要使高度保持 <code translate="no" class="notranslate text-nowrap">sticky</code>【粘性】（即永不收缩），请将 <code translate="no" class="notranslate text-nowrap">no-auto-shrink</code> 属性设置为 <code translate="no" class="notranslate text-nowrap">true</code> 。 如果未设置 <code translate="no" class="notranslate text-nowrap">max-rows</code> 或等于或小于 <code translate="no" class="notranslate text-nowrap">rows</code>【行】，则 <code translate="no" class="notranslate text-nowrap">no-auto-shrink</code> 属性无效。</p>
<p>请注意，在自动高度模式下，将自动禁用文本区域的大小调整句柄（如果浏览器支持）。</p>
<div translate="translate" class="bd-example vue-example vue-example-b-form-textarea-auto-height notranslate">
<div class="container-fluid">
<div class="row">
<div class="col-sm-2">
<label for="textarea-auto-height">Auto height:</label>
</div>
<div class="col-sm-10">
<textarea id="textarea-auto-height" placeholder="Auto height textarea" wrap="soft" class="form-control" style="resize: none; overflow-y: scroll; height: 86px;"></textarea>
</div>
</div>
<div class="row mt-2">
<div class="col-sm-2">
<label for="textarea-no-auto-shrink">No auto-shrink:</label>
</div>
<div class="col-sm-10">
<textarea id="textarea-no-auto-shrink" placeholder="Auto height (no-shrink) textarea" wrap="soft" class="form-control" style="resize: none; overflow-y: scroll; height: 86px;"></textarea>
</div>
</div>
</div>
</div>
<pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">b-container</span> <span class="hljs-attr">fluid</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-row</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">sm</span>=<span class="hljs-string">"2"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"textarea-auto-height"</span>&gt;</span>Auto height:<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">sm</span>=<span class="hljs-string">"10"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-form-textarea</span>
        <span class="hljs-attr">id</span>=<span class="hljs-string">"textarea-auto-height"</span>
        <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Auto height textarea"</span>
        <span class="hljs-attr">rows</span>=<span class="hljs-string">"3"</span>
        <span class="hljs-attr">max-rows</span>=<span class="hljs-string">"8"</span>
      &gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-form-textarea</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-row</span>&gt;</span>

  <span class="hljs-tag">&lt;<span class="hljs-name">b-row</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mt-2"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">sm</span>=<span class="hljs-string">"2"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"textarea-no-auto-shrink"</span>&gt;</span>No auto-shrink:<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">sm</span>=<span class="hljs-string">"10"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-form-textarea</span>
        <span class="hljs-attr">id</span>=<span class="hljs-string">"textarea-no-auto-shrink"</span>
        <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Auto height (no-shrink) textarea"</span>
        <span class="hljs-attr">rows</span>=<span class="hljs-string">"3"</span>
        <span class="hljs-attr">max-rows</span>=<span class="hljs-string">"8"</span>
        <span class="hljs-attr">no-auto-shrink</span>
      &gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-form-textarea</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-row</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">b-container</span>&gt;</span></pre>
<h4 id="auto-height-implementation-note" class="bv-no-focus-ring"><span class="bd-content-title">自动高度执行注意事项<a class="anchorjs-link" href="#auto-height-implementation-note" aria-labelledby="auto-height-implementation-note"></a></span></h4>
<p>自动高度通过 CSS 查询计算得出的高度来工作，因此输入必须在文档（DOM）中且可见（不通过 <code translate="no" class="notranslate text-nowrap">display: none</code> ）。初始高度是在安装时计算的。如果浏览器客户端（本身或通过 <a href="../../../bootstrap-vue/docs#js" class="font-weight-bold">polyfill</a> ）支持 <a href="https://caniuse.com/#feat=intersectionobserver" target="_blank" rel="noopener"><code translate="no" class="notranslate text-nowrap">IntersectionObserver</code></a> ，则 <code translate="no" class="notranslate text-nowrap">&lt;b-form-textarea&gt;</code> 将利用此优势确定何时可以看到文本区域，然后计算高度。请参阅入门页面上的 <a href="../../../bootstrap-vue/docs#browser" class="font-weight-bold">Browser support</a>【浏览器支持】部分。</p>
<h2 id="contextual-states" class="bv-no-focus-ring"><span class="bd-content-title">上下文状态<a class="anchorjs-link" href="#contextual-states" aria-labelledby="contextual-states"></a></span></h2>
<p>Bootstrap 包括大多数表单控件上 <code translate="no" class="notranslate text-nowrap">valid</code>【有效】和 <code translate="no" class="notranslate text-nowrap">invalid</code>【无效】状态的验证样式。</p>
<p>一般来说，您需要针对特定类型的反馈使用特定状态：</p>
<ul>
<li><code translate="no" class="notranslate text-nowrap">false</code>（表示无效状态）非常适合存在阻塞或必填字段的情况。 用户必须正确填写此字段才能提交表单。</li>
<li><code translate="no" class="notranslate text-nowrap">true</code>（表示有效状态）非常适合在整个表单中都进行逐字段验证并希望鼓励用户遍历其余字段的情况。</li>
<li><code translate="no" class="notranslate text-nowrap">null</code> 不显示验证状态（既不有效也不无效）</li>
</ul>
<p>要在 <code translate="no" class="notranslate text-nowrap">&lt;b-form-textarea&gt;</code> 上应用上下文状态图标之一，请将 <code translate="no" class="notranslate text-nowrap">state</code> 属性设置为 <code translate="no" class="notranslate text-nowrap">false</code>（对于无效），<code translate="no" class="notranslate text-nowrap">true</code>（对于有效）或 <code translate="no" class="notranslate text-nowrap">null</code>（无验证状态）。</p>
<div translate="translate" class="bd-example vue-example vue-example-b-form-textarea-state notranslate">
<div>
<textarea id="textarea-state" placeholder="Enter at least 10 characters" rows="3" wrap="soft" aria-invalid="true" class="form-control is-invalid"></textarea>
</div>
</div>
<pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-form-textarea</span>
      <span class="hljs-attr">id</span>=<span class="hljs-string">"textarea-state"</span>
      <span class="hljs-attr">v-model</span>=<span class="hljs-string">"text"</span>
      <span class="hljs-attr">:state</span>=<span class="hljs-string">"text.length &gt;= 10"</span>
      <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Enter at least 10 characters"</span>
      <span class="hljs-attr">rows</span>=<span class="hljs-string">"3"</span>
    &gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-form-textarea</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
  <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    data() {
      <span class="hljs-keyword">return</span> {
        <span class="hljs-attr">text</span>: <span class="hljs-string">''</span>
      }
    }
  }
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></pre>
<h3 id="conveying-contextual-state-to-assistive-technologies-and-colorblind-users" class="bv-no-focus-ring"><span class="bd-content-title">向辅助技术和色盲用户传达上下文状态<a class="anchorjs-link" href="#conveying-contextual-state-to-assistive-technologies-and-colorblind-users" aria-labelledby="conveying-contextual-state-to-assistive-technologies-and-colorblind-users"></a></span></h3>
<p>使用这些上下文状态来表示表单控件的状态仅提供基于颜色的可视指示，而不会将其传达给辅助技术的用户（例如屏幕阅读器）或色盲用户。</p>
<p>确保还提供了备用状态指示。 例如，您可以在表单控件的 <code translate="no" class="notranslate text-nowrap">&lt;label&gt;</code> 文本本身中包含有关状态的提示，或者通过提供其他帮助文本块来提供提示。</p>
<h3 id="aria-invalid-attribute" class="bv-no-focus-ring"><span class="bd-content-title"><code translate="no" class="notranslate text-nowrap">aria-invalid</code> 属性<a class="anchorjs-link" href="#aria-invalid-attribute" aria-labelledby="aria-invalid-attribute"></a></span></h3>
<p>当 <code translate="no" class="notranslate text-nowrap">&lt;b-form-textarea&gt;</code> 具有无效的上下文状态（即状态为 <code translate="no" class="notranslate text-nowrap">false</code> ）时，您可能还希望将 <code translate="no" class="notranslate text-nowrap">aria-invalid</code> 属性设置为 <code translate="no" class="notranslate text-nowrap">true</code> 或支持的值之一：</p>
<ul>
<li><code translate="no" class="notranslate text-nowrap">false</code>: 无错误（默认）</li>
<li><code translate="no" class="notranslate text-nowrap">true</code> 或 <code translate="no" class="notranslate text-nowrap">'true'</code>: 该值验证失败。</li>
<li><code translate="no" class="notranslate text-nowrap">'grammar'</code>: 检测到语法错误。</li>
<li><code translate="no" class="notranslate text-nowrap">'spelling'</code> 检测到拼写错误。</li>
</ul>
<p>如果 <code translate="no" class="notranslate text-nowrap">state</code> 属性设置为 <code translate="no" class="notranslate text-nowrap">false</code> ，并且未显式设置 <code translate="no" class="notranslate text-nowrap">aria-invalid</code> 属性，则 <code translate="no" class="notranslate text-nowrap">&lt;b-form-textarea&gt;</code> 将自动将 <code translate="no" class="notranslate text-nowrap">aria-invalid</code> 属性设置为<code translate="no" class="notranslate text-nowrap">'true'</code>。</p>
<h2 id="formatter-support" class="bv-no-focus-ring"><span class="bd-content-title">格式化支持<a class="anchorjs-link" href="#formatter-support" aria-labelledby="formatter-support"></a></span></h2>
<p><code translate="no" class="notranslate text-nowrap">&lt;b-form-textarea&gt;</code>（可选）通过将函数引用传递给 <code translate="no" class="notranslate text-nowrap">formatter</code> 属性支持格式化。</p>
<p>当控件的本机 <code translate="no" class="notranslate text-nowrap">input</code> 和 <code translate="no" class="notranslate text-nowrap">change</code> 事件触发时，就会发生格式化（提供格式化程序功能时）。您可以使用 boolean <code translate="no" class="notranslate text-nowrap">lazy-formatter</code> 属性将格式化程序功能限制为在控件的本机 <code translate="no" class="notranslate text-nowrap">blur</code> 事件上调用。</p>
<p><code translate="no" class="notranslate text-nowrap">formatter</code> 函数接收两个参数：输入元素的原始 <code translate="no" class="notranslate text-nowrap">value</code> 和触发格式的本机 <code translate="no" class="notranslate text-nowrap">event</code> 对象（如果有）。</p>
<p><code translate="no" class="notranslate text-nowrap">formatter</code> 函数应将格式化后的值作为 <em>string</em> 返回。</p>
<p>如果未提供 <code translate="no" class="notranslate text-nowrap">formatter</code> ，则不会进行格式化。</p>
<div translate="translate" class="bd-example vue-example vue-example-b-form-textarea-formatter notranslate">
<div>
<div role="group" class="form-group mb-0" id="__BVID__1109">
<label for="textarea-formatter" class="d-block" id="__BVID__1109__BV_label_">Textarea with formatter (on input)</label>
<div class="bv-no-focus-ring">
<textarea id="textarea-formatter" placeholder="Enter your text" rows="2" wrap="soft" class="form-control" aria-describedby="__BVID__1109__BV_description_"></textarea>
<small tabindex="-1" class="form-text text-muted" id="__BVID__1109__BV_description_">We will convert your text to lowercase instantly</small></div>
</div>
<p style="white-space: pre-line;"><b>Value:</b> </p>
<div role="group" class="form-group mb-0" id="__BVID__1111">
<label for="textarea-lazy" class="d-block" id="__BVID__1111__BV_label_">Textarea with lazy formatter (on blur)</label>
<div class="bv-no-focus-ring">
<textarea id="textarea-lazy" placeholder="Enter your text" rows="2" wrap="soft" class="form-control" aria-describedby="__BVID__1111__BV_description_"></textarea>
<small tabindex="-1" class="form-text text-muted" id="__BVID__1111__BV_description_">This one is a little lazy!</small></div>
</div>
<p class="mb-0" style="white-space: pre-line;"><b>Value:</b> </p>
</div>
</div>
<pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-form-group</span>
      <span class="hljs-attr">class</span>=<span class="hljs-string">"mb-0"</span>
      <span class="hljs-attr">label</span>=<span class="hljs-string">"Textarea with formatter (on input)"</span>
      <span class="hljs-attr">label-for</span>=<span class="hljs-string">"textarea-formatter"</span>
      <span class="hljs-attr">description</span>=<span class="hljs-string">"We will convert your text to lowercase instantly"</span>
    &gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-form-textarea</span>
        <span class="hljs-attr">id</span>=<span class="hljs-string">"textarea-formatter"</span>
        <span class="hljs-attr">v-model</span>=<span class="hljs-string">"text1"</span>
        <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Enter your text"</span>
        <span class="hljs-attr">:formatter</span>=<span class="hljs-string">"formatter"</span>
      &gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-form-textarea</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-form-group</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"white-space: pre-line"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">b</span>&gt;</span>Value:<span class="hljs-tag">&lt;/<span class="hljs-name">b</span>&gt;</span> {{ text1 }}<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>

    <span class="hljs-tag">&lt;<span class="hljs-name">b-form-group</span>
      <span class="hljs-attr">class</span>=<span class="hljs-string">"mb-0"</span>
      <span class="hljs-attr">label</span>=<span class="hljs-string">"Textarea with lazy formatter (on blur)"</span>
      <span class="hljs-attr">label-for</span>=<span class="hljs-string">"textarea-lazy"</span>
      <span class="hljs-attr">description</span>=<span class="hljs-string">"This one is a little lazy!"</span>
    &gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-form-textarea</span>
        <span class="hljs-attr">id</span>=<span class="hljs-string">"textarea-lazy"</span>
        <span class="hljs-attr">v-model</span>=<span class="hljs-string">"text2"</span>
        <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Enter your text"</span>
        <span class="hljs-attr">lazy-formatter</span>
        <span class="hljs-attr">:formatter</span>=<span class="hljs-string">"formatter"</span>
      &gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-form-textarea</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-form-group</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mb-0"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"white-space: pre-line"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">b</span>&gt;</span>Value:<span class="hljs-tag">&lt;/<span class="hljs-name">b</span>&gt;</span> {{ text2 }}<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
  <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    data() {
      <span class="hljs-keyword">return</span> {
        <span class="hljs-attr">text1</span>: <span class="hljs-string">''</span>,
        <span class="hljs-attr">text2</span>: <span class="hljs-string">''</span>
      }
    },
    <span class="hljs-attr">methods</span>: {
      formatter(value) {
        <span class="hljs-keyword">return</span> value.toLowerCase()
      }
    }
  }
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></pre>
<p><strong>注意：</strong> 对于非延迟格式，如果光标不在输入值的 <em>末尾</em> ，则键入字符后光标可能会跳到末尾。您可以使用提供的事件对象和 <code translate="no" class="notranslate text-nowrap">event.target</code> 来访问本机输入的选择方法和属性，以控制插入点的位置。这留给读者练习。</p>
<h2 id="readonly-plain-text" class="bv-no-focus-ring"><span class="bd-content-title">只读纯文本<a class="anchorjs-link" href="#readonly-plain-text" aria-labelledby="readonly-plain-text"></a></span></h2>
<p>如果要在表单中将 <code translate="no" class="notranslate text-nowrap">&lt;b-form-textarea readonly&gt;</code> 元素设置为纯文本样式，请设置 <code translate="no" class="notranslate text-nowrap">plaintext</code> 属性（无需设置 <code translate="no" class="notranslate text-nowrap">readonly</code> ，因为它将自动设置）以删除默认表单字段样式并保留正确的样式 文字大小，边距，填充和高度。</p>
<div translate="translate" class="bd-example vue-example vue-example-b-form-textarea-plaintext notranslate">
<div>
<textarea id="textarea-plaintext" readonly="readonly" rows="2" wrap="soft" class="form-control-plaintext"></textarea>
</div>
</div>
<pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-form-textarea</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"textarea-plaintext"</span> <span class="hljs-attr">plaintext</span> <span class="hljs-attr">:value</span>=<span class="hljs-string">"text"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-form-textarea</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
  <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    data() {
      <span class="hljs-keyword">return</span> {
        <span class="hljs-attr">text</span>: <span class="hljs-string">"This is some text.\nIt is read only and doesn't look like an input."</span>
      }
    }
  }
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></pre>
<h2 id="v-model-modifiers" class="bv-no-focus-ring"><span class="bd-content-title"><code translate="no" class="notranslate text-nowrap">v-model</code> 修饰语<a class="anchorjs-link" href="#v-model-modifiers" aria-labelledby="v-model-modifiers"></a></span></h2>
<p>Vue 在基于自定义组件的输入的 <code translate="no" class="notranslate text-nowrap">v-model</code> 上不正式支持 <code translate="no" class="notranslate text-nowrap">.lazy</code> ，<code translate="no" class="notranslate text-nowrap">.trim</code> ，和 <code translate="no" class="notranslate text-nowrap">.number</code> 修饰符，并且可能会产生不良的用户体验。避免使用 Vue 的本机修饰符。</p>
<p>为了解决这个问题，<code translate="no" class="notranslate text-nowrap">&lt;b-form-textarea&gt;</code> 具有三个布尔属性 <code translate="no" class="notranslate text-nowrap">trim</code> ，<code translate="no" class="notranslate text-nowrap">number</code> ，和 <code translate="no" class="notranslate text-nowrap">lazy</code> ，它们分别模拟本地 Vue <code translate="no" class="notranslate text-nowrap">v-model</code> 修饰符 <code translate="no" class="notranslate text-nowrap">.trim</code> 和 <code translate="no" class="notranslate text-nowrap">.number</code> 和 <code translate="no" class="notranslate text-nowrap">.lazy</code> 。<code translate="no" class="notranslate text-nowrap">lazy</code> 属性将在 <code translate="no" class="notranslate text-nowrap">change</code>/<code translate="no" class="notranslate text-nowrap">blur</code> 事件上更新 v-model。</p>
<p><strong>注意：</strong></p>
<ul>
<li><code translate="no" class="notranslate text-nowrap">number</code> 属性优先于  <code translate="no" class="notranslate text-nowrap">trim</code> 属性（即，设置 <code translate="no" class="notranslate text-nowrap">number</code> 时 <code translate="no" class="notranslate text-nowrap">trim</code> 不会生效）。</li>
<li>使用 <code translate="no" class="notranslate text-nowrap">number</code> 属性时，如果可以将值解析为数字（通过 <code translate="no" class="notranslate text-nowrap">parseFloat</code> ），它将返回 <code translate="no" class="notranslate text-nowrap">Number</code> 类型的值到 <code translate="no" class="notranslate text-nowrap">v-model</code> ，否则，原始输入值将以 <code translate="no" class="notranslate text-nowrap">String</code> 类型返回。这与本机 <code translate="no" class="notranslate text-nowrap">.number</code> 修饰符的行为相同。</li>
<li><code translate="no" class="notranslate text-nowrap">trim</code> 和 <code translate="no" class="notranslate text-nowrap">number</code> 修饰符道具不会影响 <code translate="no" class="notranslate text-nowrap">input</code> 或 <code translate="no" class="notranslate text-nowrap">change</code> 事件返回的值。可选格式设置之后，这些事件将始终返回 <code translate="no" class="notranslate text-nowrap">&lt;textarea&gt;</code> 内容的字符串值（该值可能与通过处理修饰符的 <code translate="no" class="notranslate text-nowrap">v-model</code> <code translate="no" class="notranslate text-nowrap">update</code> 事件返回的值不匹配）。</li>
</ul>
<h2 id="debounce-support" class="bv-no-focus-ring"><span class="bd-content-title">防反跳支持<a class="anchorjs-link" href="#debounce-support" aria-labelledby="debounce-support"></a></span></h2>
<p>作为 <code translate="no" class="notranslate text-nowrap">lazy</code> 修饰符属性的替代，<code translate="no" class="notranslate text-nowrap">&lt;b-form-textarea&gt;</code> 可选地支持反跳用户输入，在从用户输入最后一个字符（或发生 <code translate="no" class="notranslate text-nowrap">change</code> 事件）开始的一段空闲时间后更新 <code translate="no" class="notranslate text-nowrap">v-model</code> 。如果用户在空闲超时到期之前输入新字符（或删除字符），则会重新启动超时。</p>
<p>要启用反跳，请将 <code translate="no" class="notranslate text-nowrap">debounce</code> 属性设置为大于零的任何整数。该值以毫秒为单位指定。将防反跳设置为 <code translate="no" class="notranslate text-nowrap">0</code> 将禁用 <code translate="no" class="notranslate text-nowrap">debounce</code> 。</p>
<p>注意：如果设置了 <code translate="no" class="notranslate text-nowrap">lazy</code> 属性，则 <em>不会</em> 发生反跳。</p>
<div translate="translate" class="bd-example vue-example vue-example-b-form-textarea-debounce notranslate">
<div>
<textarea wrap="soft" class="form-control" style="resize: none; overflow-y: scroll; height: 86px;" id="__BVID__1116"></textarea>
<pre class="mt-2 mb-0"></pre>
</div>
</div>
<pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-form-textarea</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"value"</span> <span class="hljs-attr">debounce</span>=<span class="hljs-string">"500"</span> <span class="hljs-attr">rows</span>=<span class="hljs-string">"3"</span> <span class="hljs-attr">max-rows</span>=<span class="hljs-string">"5"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-form-textarea</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">pre</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mt-2 mb-0"</span>&gt;</span>{{ value }}<span class="hljs-tag">&lt;/<span class="hljs-name">pre</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
  <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    data() {
      <span class="hljs-keyword">return</span> {
        <span class="hljs-attr">value</span>: <span class="hljs-string">''</span>
      }
    }
  }
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></pre>
<h2 id="autofocus" class="bv-no-focus-ring"><span class="bd-content-title">自动获取焦点<a class="anchorjs-link" href="#autofocus" aria-labelledby="autofocus"></a></span></h2>
<p>当 <code translate="no" class="notranslate text-nowrap">autofocus</code> 属性设置为 <code translate="no" class="notranslate text-nowrap">&lt;b-form-textarea&gt;</code> 时，将文本区域插入（即 <strong>mounted</strong>【安装】）到文档中时将自动对焦，或者在 Vue <code translate="no" class="notranslate text-nowrap">&lt;keep-alive&gt;</code>组件内部重新激活时。请注意，此道具 <strong>不会</strong> 在文本区域上设置 <code translate="no" class="notranslate text-nowrap">autofocus</code> 属性，也无法告诉该文本区域何时可见。</p>
<h2 id="native-and-custom-events" class="bv-no-focus-ring"><span class="bd-content-title">本机和自定义事件<a class="anchorjs-link" href="#native-and-custom-events" aria-labelledby="native-and-custom-events"></a></span></h2>
<p>支持所有本机事件（自定义 <code translate="no" class="notranslate text-nowrap">input</code> 和 <code translate="no" class="notranslate text-nowrap">change</code> 事件除外），而无需 <code translate="no" class="notranslate text-nowrap">.native</code> 修饰符。</p>
<p>定制 <code translate="no" class="notranslate text-nowrap">input</code> 和 <code translate="no" class="notranslate text-nowrap">change</code> 事件接收当前 <code translate="no" class="notranslate text-nowrap">value</code> 的单个参数（在应用任何格式之后），并由用户交互触发。</p>
<p>自定义 <code translate="no" class="notranslate text-nowrap">update</code> 事件传递给输入值，并在 <code translate="no" class="notranslate text-nowrap">v-model</code> 需要更新时发出（在需要 <code translate="no" class="notranslate text-nowrap">input</code> ，<code translate="no" class="notranslate text-nowrap">change</code> ，和 <code translate="no" class="notranslate text-nowrap">blur</code> 之前发出）。</p>
<p>您始终可以使用 <code translate="no" class="notranslate text-nowrap">.native</code> 修饰符访问本机 <code translate="no" class="notranslate text-nowrap">input</code> 和 <code translate="no" class="notranslate text-nowrap">change</code> 事件。</p>
<h2 id="exposed-input-properties-and-methods" class="bv-no-focus-ring"><span class="bd-content-title">公开的 input 属性和方法<a class="anchorjs-link" href="#exposed-input-properties-and-methods" aria-labelledby="exposed-input-properties-and-methods"></a></span></h2>
<p><code translate="no" class="notranslate text-nowrap">&lt;b-form-textarea&gt;</code> 在组件引用中暴露了几个本机输入元素的属性和方法(例如，将一个 <code translate="no" class="notranslate text-nowrap">ref</code> 赋值给 <code translate="no" class="notranslate text-nowrap">&lt;b-form-textarea ref="foo" ...&gt;</code> 和使用 <code translate="no" class="notranslate text-nowrap">this.$refs['foo'].propertyName</code> 或 <code translate="no" class="notranslate text-nowrap">this.$refs['foo'].methodName(...)</code>)。</p>
<h3 id="input-properties" class="bv-no-focus-ring"><span class="bd-content-title">Input 属性<a class="anchorjs-link" href="#input-properties" aria-labelledby="input-properties"></a></span></h3>
<div class="table-responsive-sm">
<table class="b-table table table-bordered table-striped bv-docs-table">
<thead class="thead-default">
<tr>
<th>属性</th>
<th>注意</th>
</tr>
</thead>
<tbody>
<tr>
<td><code translate="no" class="notranslate text-nowrap">.selectionStart</code></td>
<td>Read/Write</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">.selectionEnd</code></td>
<td>Read/Write</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">.selectionDirection</code></td>
<td>Read/Write</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">.validity</code></td>
<td>Read only</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">.validationMessage</code></td>
<td>Read only</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">.willValidate</code></td>
<td>Read only</td>
</tr>
</tbody>
</table>
</div>
<h3 id="input-methods" class="bv-no-focus-ring"><span class="bd-content-title">Input 方法<a class="anchorjs-link" href="#input-methods" aria-labelledby="input-methods"></a></span></h3>
<div class="table-responsive-sm">
<table class="b-table table table-bordered table-striped bv-docs-table">
<thead class="thead-default">
<tr>
<th>方法</th>
<th>注意</th>
</tr>
</thead>
<tbody>
<tr>
<td><code translate="no" class="notranslate text-nowrap">.focus()</code></td>
<td>input 焦点</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">.blur()</code></td>
<td>从 input 中移出焦点</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">.select()</code></td>
<td>选择 input 中的所有文本</td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">.setSelectionRange()</code></td>
<td></td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">.setRangeText()</code></td>
<td></td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">.setCustomValidity()</code></td>
<td></td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">.checkValidity()</code></td>
<td></td>
</tr>
<tr>
<td><code translate="no" class="notranslate text-nowrap">.reportValidity()</code></td>
<td></td>
</tr>
</tbody>
</table>
</div>
<p>有关这些方法和属性的更多信息，请参阅<a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement" target="_blank" rel="noopener">https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement</a>  支持因 input 类型而异。</p>
<!-- Component reference added automatically from component package.json -->
</section>
<section class="bd-content bd-component-reference">
<h2 id="component-reference" tabindex="-1" class="bv-no-focus-ring"><span class="bd-content-title">组件引用<a href="../../../bootstrap-vue/docs/components/form-textarea#component-reference" class="anchorjs-link" aria-labelledby="component-reference" target="_self"></a></span></h2>
<section data-v-866a22e8="" class="bd-content">
<header data-v-866a22e8="" class="row align-items-center">
<div data-v-866a22e8="" class="col-sm-9">
<h3 data-v-866a22e8="" id="comp-ref-b-form-textarea" tabindex="-1" class="bv-no-focus-ring"><span data-v-866a22e8="" class="bd-content-title"><code data-v-866a22e8="" translate="translate" class="notranslate bigger">&lt;b-form-textarea&gt;</code><a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/form-textarea#comp-ref-b-form-textarea" class="anchorjs-link" aria-labelledby="comp-ref-b-form-textarea" target="_self"></a></span></h3>
</div>
<div data-v-866a22e8="" class="text-sm-right col-sm-3"><a data-v-866a22e8="" rel="noopener" target="_blank" href="https://github.com/bootstrap-vue/bootstrap-vue/tree/dev/src/components/form-textarea/form-textarea.js" class="btn btn-outline-secondary btn-sm"> 查看源代码 </a></div>
</header>
<ul data-v-866a22e8="" class="component-ref-mini-toc my-3">
<li data-v-866a22e8=""><a data-v-866a22e8="" href="#comp-ref-b-form-textarea-aliases"><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-form-textarea&gt;</code> 组件别名 </a></li>
<li data-v-866a22e8=""><a data-v-866a22e8="" href="#comp-ref-b-form-textarea-props"><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-form-textarea&gt;</code> 属性 </a></li>
<li data-v-866a22e8=""><a data-v-866a22e8="" href="#comp-ref-b-form-textarea-v-model"><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-form-textarea&gt;</code> v-model </a></li>
<li data-v-866a22e8=""><a data-v-866a22e8="" href="#comp-ref-b-form-textarea-events"><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-form-textarea&gt;</code> 事件 </a></li>
</ul>
<article data-v-866a22e8="" class="bd-content">
<h4 data-v-866a22e8="" id="comp-ref-b-form-textarea-aliases" tabindex="-1" class="bv-no-focus-ring mb-3"><span data-v-866a22e8="" class="bd-content-title"> 组件别名 <a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/form-textarea#comp-ref-b-form-textarea-aliases" class="anchorjs-link" aria-labelledby="comp-ref-b-form-textarea-aliases" target="_self"></a></span></h4>
<p data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-form-textarea&gt;</code> 也可以通过以下别名使用：</p>
<ul data-v-866a22e8="">
<li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">&lt;b-textarea&gt;</code></li>
</ul>
<div data-v-866a22e8="" class="alert alert-info">
<p data-v-866a22e8="" class="mb-0 small"> 注意：组件别名仅在导入所有 BootstrapVue 或使用组件组插件时可用。 </p>
</div>
</article>
<h4 data-v-866a22e8="" id="comp-ref-b-form-textarea-props" tabindex="-1" class="bv-no-focus-ring mb-3"><span data-v-866a22e8="" class="bd-content-title"> 属性 <a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/form-textarea#comp-ref-b-form-textarea-props" class="anchorjs-link" aria-labelledby="comp-ref-b-form-textarea-props" target="_self"></a></span></h4>
<div data-v-866a22e8="" class="table-responsive-sm">
<table role="table" aria-busy="false" aria-colcount="4" class="table b-table bv-docs-table table-striped" id="__BVID__1018">
<thead role="rowgroup" class="">
<tr role="row" class="">
<th role="columnheader" scope="col" tabindex="0" aria-colindex="1" aria-sort="none" class="b-table-sort-icon-left">属性<span class="sr-only"> (Click to sort Ascending)</span></th>
<th role="columnheader" scope="col" tabindex="0" aria-colindex="2" class="">类型</th>
<th role="columnheader" scope="col" tabindex="0" aria-colindex="3" class="">默认值</th>
<th role="columnheader" scope="col" tabindex="0" aria-colindex="4" class="">描述</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" data-pk="id" class="" id="__BVID__1018__row_id">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">id</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">用于在渲染的内容上设置“id”属性，并用作根据需要生成任何其他元素ID的基础</td>
</tr>
<tr role="row" data-pk="name" class="" id="__BVID__1018__row_name">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">name</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">设置表单控件上“name”属性的值</td>
</tr>
<tr role="row" data-pk="disabled" class="" id="__BVID__1018__row_disabled">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">disabled</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">设置为“true”时，禁用组件的功能并将其置于禁用状态</td>
</tr>
<tr role="row" data-pk="required" class="" id="__BVID__1018__row_required">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">required</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">将“required”属性添加到表单控件</td>
</tr>
<tr role="row" data-pk="form" class="" id="__BVID__1018__row_form">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">form</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">表单控件所属的表单的ID。在控件上设置“form”属性</td>
</tr>
<tr role="row" data-pk="autofocus" class="" id="__BVID__1018__row_autofocus">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">autofocus</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">设置为“true”时，尝试在安装控件时自动将其调焦，或者在保持活动状态时将其重新激活。未在控件上设置“autofocus”属性</td>
</tr>
<tr role="row" data-pk="size" class="" id="__BVID__1018__row_size">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">size</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">设置组件外观的大小。'sm'，'md'（默认）或'lg'</td>
</tr>
<tr role="row" data-pk="state" class="" id="__BVID__1018__row_state">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">state</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">控制组件的验证状态外观。“true”表示有效，“false”表示无效”，“null”表示无验证状态</td>
</tr>
<tr role="row" data-pk="value" class="" id="__BVID__1018__row_value">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">value</code> <span data-v-866a22e8="" class="badge badge-primary">v-model</span></td>
<td aria-colindex="2" role="cell" class="">String or Number</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">文本区域的当前值。结果将始终为字符串，除非使用“number”属性</td>
</tr>
<tr role="row" data-pk="aria-invalid" class="" id="__BVID__1018__row_aria-invalid">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">aria-invalid</code></td>
<td aria-colindex="2" role="cell" class="">Boolean or String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">将 aria-invalid 属性设置为指定值</td>
</tr>
<tr role="row" data-pk="readonly" class="" id="__BVID__1018__row_readonly">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">readonly</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">在表单控件上设置“readonly”属性</td>
</tr>
<tr role="row" data-pk="plaintext" class="" id="__BVID__1018__row_plaintext">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">plaintext</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">将表单控件设置为只读，并使该控件看起来像纯文本（无边框）</td>
</tr>
<tr role="row" data-pk="autocomplete" class="" id="__BVID__1018__row_autocomplete">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">autocomplete</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">在表单控件上设置“autocomplete”属性值</td>
</tr>
<tr role="row" data-pk="placeholder" class="" id="__BVID__1018__row_placeholder">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">placeholder</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">在表单控件上设置“placeholder”属性值</td>
</tr>
<tr role="row" data-pk="formatter" class="" id="__BVID__1018__row_formatter">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">formatter</code></td>
<td aria-colindex="2" role="cell" class="">Function</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">引用格式化文本区域的功能</td>
</tr>
<tr role="row" data-pk="lazy-formatter" class="" id="__BVID__1018__row_lazy-formatter">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">lazy-formatter</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">设置后，将文本区域格式化为失焦格式，而不是每个按键（如果指定了格式化程序）</td>
</tr>
<tr role="row" data-pk="trim" class="" id="__BVID__1018__row_trim">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">trim</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">设置后，从输入值中修剪所有前导和尾随空白。模拟 Vue '.trim' v-model 修改器</td>
</tr>
<tr role="row" data-pk="number" class="" id="__BVID__1018__row_number">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">number</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">设置时，尝试将输入值转换为本地数字。模拟 Vue '.number' v-model 修改器</td>
</tr>
<tr role="row" data-pk="lazy" class="" id="__BVID__1018__row_lazy">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">lazy</code> <span data-v-866a22e8="" class="badge badge-secondary">v2.1.0+</span></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">设置后，在'change'/'blur'事件而不是'input'上更新 v-model 。模拟 Vue '.lazy' v-model 修改器</td>
</tr>
<tr role="row" data-pk="debounce" class="" id="__BVID__1018__row_debounce">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">debounce</code> <span data-v-866a22e8="" class="badge badge-secondary">v2.1.0+</span></td>
<td aria-colindex="2" role="cell" class="">Number or String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">0</code></td>
<td aria-colindex="4" role="cell" class="">设置为大于零的毫秒数时，将消除用户输入的反跳。如果设置了“lazy”属性，则无效</td>
</tr>
<tr role="row" data-pk="rows" class="" id="__BVID__1018__row_rows">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">rows</code></td>
<td aria-colindex="2" role="cell" class="">Number or String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">2</code></td>
<td aria-colindex="4" role="cell" class="">要显示的最小行数。 必须大于1的值</td>
</tr>
<tr role="row" data-pk="max-rows" class="" id="__BVID__1018__row_max-rows">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">max-rows</code></td>
<td aria-colindex="2" role="cell" class="">Number or String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">要显示的最大行数。提供时，文本区域将增长（或缩小）以使内容适合最大行数</td>
</tr>
<tr role="row" data-pk="wrap" class="" id="__BVID__1018__row_wrap">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">wrap</code></td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">'soft'</code></td>
<td aria-colindex="4" role="cell" class="">放置在textarea的'wrap'属性上的值。 控制如何返回换行符</td>
</tr>
<tr role="row" data-pk="no-resize" class="" id="__BVID__1018__row_no-resize">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">no-resize</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">设置后，禁用浏览器的调整大小句柄，以防止用户更改文本区域的高度。 在自动高度模式下自动设置</td>
</tr>
<tr role="row" data-pk="no-auto-shrink" class="" id="__BVID__1018__row_no-auto-shrink">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="text-nowrap notranslate">no-auto-shrink</code></td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">设置后，防止自动高度文本区域缩小以适合内容</td>
</tr>
</tbody>
</table>
</div>
<h4 data-v-866a22e8="" id="comp-ref-b-form-textarea-v-model" tabindex="-1" class="bv-no-focus-ring mb-3"><span data-v-866a22e8="" class="bd-content-title"> v-model <a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/form-textarea#comp-ref-b-form-textarea-v-model" class="anchorjs-link" aria-labelledby="comp-ref-b-form-textarea-v-model" target="_self"></a></span></h4>
<div data-v-866a22e8="" class="table-responsive-sm">
<table role="table" aria-busy="false" aria-colcount="2" class="table b-table bv-docs-table table-striped" id="__BVID__1053">
<thead role="rowgroup" class="">
<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">属性</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">事件</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" class="">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="notranslate">value</code></td>
<td aria-colindex="2" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="notranslate">update</code></td>
</tr>
</tbody>
</table>
</div>
<h4 data-v-866a22e8="" id="comp-ref-b-form-textarea-events" tabindex="-1" class="bv-no-focus-ring mb-3"><span data-v-866a22e8="" class="bd-content-title"> 事件 <a data-v-866a22e8="" href="../../../bootstrap-vue/docs/components/form-textarea#comp-ref-b-form-textarea-events" class="anchorjs-link" aria-labelledby="comp-ref-b-form-textarea-events" target="_self"></a></span></h4>
<div data-v-866a22e8="" class="table-responsive-sm">
<table role="table" aria-busy="false" aria-colcount="3" class="table b-table bv-docs-table table-striped" id="__BVID__1062">
<thead role="rowgroup" class="">
<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">事件</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">参数</th>
<th role="columnheader" scope="col" aria-colindex="3" class="">描述</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" data-pk="input" class="" id="__BVID__1062__row_input">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="notranslate">input</code></td>
<td aria-colindex="2" role="cell" class=""><ol data-v-866a22e8="" class="list-unstyled mb-0">
<li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">value</code> - <span data-v-866a22e8="">textarea 的当前值</span></li>
</ol></td>
<td aria-colindex="3" role="cell" class="">用户交互触发的输入事件。在任何格式（不包括 'trim' or 'number' 属性）之后以及更新v-model后发出</td>
</tr>
<tr role="row" data-pk="change" class="" id="__BVID__1062__row_change">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="notranslate">change</code></td>
<td aria-colindex="2" role="cell" class=""><ol data-v-866a22e8="" class="list-unstyled mb-0">
<li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">value</code> - <span data-v-866a22e8="">textarea 的当前值</span></li>
</ol></td>
<td aria-colindex="3" role="cell" class="">由用户交互触发的更改事件。在任何格式（不包括'trim'或'number'属性）和v模型更新后发出。</td>
</tr>
<tr role="row" data-pk="update" class="" id="__BVID__1062__row_update">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="notranslate">update</code></td>
<td aria-colindex="2" role="cell" class=""><ol data-v-866a22e8="" class="list-unstyled mb-0">
<li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">value</code> - <span data-v-866a22e8="">格式化后的 textarea 值。如果值不变，则不发出</span></li>
</ol></td>
<td aria-colindex="3" role="cell" class="">发出以更新 v-model</td>
</tr>
<tr role="row" data-pk="blur" class="" id="__BVID__1062__row_blur">
<td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate" class="notranslate">blur</code></td>
<td aria-colindex="2" role="cell" class=""><ol data-v-866a22e8="" class="list-unstyled mb-0">
<li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate" class="notranslate">event</code> - <span data-v-866a22e8="">本机 blur 事件（在发生任何可选格式之前）</span></li>
</ol></td>
<td aria-colindex="3" role="cell" class="">textarea 失去焦点后发出</td>
</tr>
</tbody>
</table>
</div>
<h3 id="importing-individual-components" tabindex="-1" class="bv-no-focus-ring"><span class="bd-content-title"> 导入单个组件 <a href="../../../bootstrap-vue/docs/components/form-textarea#importing-individual-components" class="anchorjs-link" aria-labelledby="importing-individual-components" target="_self"></a></span></h3>
<p> 您可以通过以下命名的导出将单个组件导入到项目中：</p>
<div class="table-responsive-sm">
<table role="table" aria-busy="false" aria-colcount="3" class="table b-table bv-docs-table table-striped" id="__BVID__1076">
<thead role="rowgroup" class="thead-default">
<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">组件</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">命名输出</th>
<th role="columnheader" scope="col" aria-colindex="3" class="">导入路径</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" class="">
<td aria-colindex="1" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">&lt;b-form-textarea&gt;</code></td>
<td aria-colindex="2" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">BFormTextarea</code></td>
<td aria-colindex="3" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">bootstrap-vue</code></td>
</tr>
</tbody>
</table>
</div>
<p><strong>示例：</strong></p>
<pre translate="translate" class="hljs language-js text-monospace p-2 notranslate javascript"><span class="hljs-keyword">import</span> { BFormTextarea } <span class="hljs-keyword">from</span> <span class="hljs-string">'bootstrap-vue'</span>
Vue.component(<span class="hljs-string">'b-form-textarea'</span>, BFormTextarea)</pre>
</article>
<article class="bd-content">
<h3 id="importing-as-a-plugin" tabindex="-1" class="bv-no-focus-ring"><span class="bd-content-title"> 导入为Vue.js插件 <a href="../../../bootstrap-vue/docs/components/form-textarea#importing-as-a-plugin" class="anchorjs-link" aria-labelledby="importing-as-a-plugin" target="_self"></a></span></h3>
<p> 该插件包括上面列出的所有单个组件。插件还包括任何组件别名。 </p>
<div class="table-responsive-sm">
<table fileds="namedExport,importPath" role="table" aria-busy="false" aria-colcount="2" class="table b-table bv-docs-table table-striped b-table-caption-top" id="__BVID__1086">
<thead role="rowgroup" class="thead-default">
<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">命名输出</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">导入路径</th>
</tr>
</thead>
<tbody role="rowgroup">
<tr role="row" class="">
<td aria-colindex="1" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">FormTextareaPlugin</code></td>
<td aria-colindex="2" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">bootstrap-vue</code></td>
</tr>
</tbody>
</table>
</div>
<p><strong>示例：</strong></p>
<pre translate="translate" class="hljs language-js text-monospace p-2 notranslate javascript"><span class="hljs-keyword">import</span> { FormTextareaPlugin } <span class="hljs-keyword">from</span> <span class="hljs-string">'bootstrap-vue'</span>
Vue.use(FormTextareaPlugin)</pre>








</main>
</div>
</div>


<script src="../../../v4/assets/js/vendor/jquery-slim.min.js"></script>
<script src="../../../v4/dist/js/popper.min.js"></script> 
<script src="../../../v4/dist/js/bootstrap.min.js"></script> 
<script src="../../../v4/assets/js/docs.min.js"></script> 
<script src="../../../v4/assets/js/ie-emulation-modes-warning.js"></script> 
<script src="../../../v4/assets/js/docsearch.min.js"></script> 
<script>
  docsearch({
    appId: 'PRR89ISST8',
    apiKey: '95044d57d4d7bb744f322d1f18ed607f',
    indexName: 'z01-bootstrapV4',
    inputSelector: '#search-input',
    handleSelected: function (input, event, suggestion) {
      var url = suggestion.url;
      url = suggestion.isLvl1 ? url.split('#')[0]: url;
      // If it's a title we remove the anchor so it does not jump.
      window.location.href = url;
    },
    transformData: function (hits) {
      return hits.map(function (hit) {
        hit.url = hit.url.replace('https://v4-alpha.getbootstrap.com', '/docs/4.0');
        return hit;
      });
    },
    debug: false // Set debug to true if you want to inspect the dropdown
  });
</script> 
<script>
  Holder.addTheme('gray', {
    bg: '#777',
    fg: 'rgba(255,255,255,.75)',
    font: 'Helvetica',
    fontweight: 'normal'
  });
</script>
</body>
</html>
